<template>
  <el-dialog title="编辑" :visible.sync="dialogEditVisibleL" >
    <el-form :model="dataUpdate"  :rules="rules" ref="update">
      <template v-for="(item, index) in tableHeadData" >
        <el-form-item :label="item.label" :prop="item.prop" v-if="!item.form && !item.type" :key="index">
          <el-input v-model="dataUpdate[item.prop]"></el-input>
        </el-form-item>
        <el-form-item :label="labelFormat(item.label)" :prop="item.prop" v-if="!item.form && item.type === 'radio'" :key="index">
          <el-radio-group v-model="dataUpdate[item.prop]">
            <template v-for="(itemR, indexR) in item.radio">
              <el-radio :label=indexR :key="indexR">{{itemR.name}}</el-radio >
            </template>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="item.label" :prop="item.prop" v-if="!item.form && item.type === 'time'" :key="index">
          <el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间" v-model="dataUpdate[item.prop]"></el-date-picker>
        </el-form-item>
        <el-form-item :label="item.label" :prop="item.prop" v-if="!item.form && item.type === 'img'" :key="index">
          <el-upload
              ref="upload"
              v-model="dataUpdate[item.prop]"
              class="avatar-uploader"
              action="/api/common/upload"
              :on-success="
        (response, file, fileList) => {
          return handleSuccess(response, file, fileList);
        }
      ">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <el-image
              style="width: 100px; height: 100px; margin-bottom:-4px"
              :src="`/api/common/download?name=${dataUpdate.img}`"
          ></el-image>
        </el-form-item>

        <el-form-item :label="item.label" :prop="item.prop" v-if="!item.form && item.type === 'select'" :key="index">
            <el-select v-model="dataUpdate[item.prop]" placeholder="请选择">
              <el-option
                  v-for="i in selectList[item.prop]"
                  :key="i.id"
                  :label="i.typeName"
                  :value="i.id"
              :disabled="i.name==='管理员'">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item :label="item.label" :prop="item.prop" v-if="!item.form && item.type === 'text'" :key="index">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="dataUpdate[item.prop]">
          </el-input>
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogEditVisibleL = false">取 消</el-button>
      <el-button type="primary" @click="editConfirm('update')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>


export default{
  name:"editCOM",
  props:{
    dialogEditVisible:{
      type: Boolean
    },
    tableHeadData:{
      default: () => {
        return []
      }},
    dataUpdate:{
      default: () => {
        return []
      }},
    rules:{
      default: () => {
        return []
      }},
    selectList:{
      default: () => {
        return []
      }}

  },

  data(){
    return{
      dataUpdateL:JSON.parse(JSON.stringify(this.dataUpdate)),
      dialogEditVisibleL:false,
      options:''
    }
  },
  methods:{
    editConfirm(formName){
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm('确认修改, 是否继续?', '确定修改', {
            'confirmButtonText': '确定',
            'cancelButtonText': '取消',
          }).then(() => {
            this.$emit('edit',this.dataUpdateL)
          })
          return
        }
        else {
          this.$message.error("信息输入不规范")
          return false
        }
      });
    },
    handleSuccess(response, file, fileList, rowInfo) {
      this.dataUpdate.img = response.data
      this.$refs.upload.clearFiles();
    },
    labelFormat(label){
      const reg = /^((?!\(.*\)).)*/;
      return label.match(reg)[0]
    }
  },

  watch: {
    // 观察父级组件的showFlag，并将showFlag的最新值设置给dialogVisible
    dataUpdate (newVal, oldVal) {
      this.dataUpdateL = newVal
    },
    dialogEditVisible (newVal, oldVal) {
      this.dialogEditVisibleL = newVal
    },
    dialogEditVisibleL (newVal,oldVal){
      if (!newVal){
        this.$emit('dialogEdit')
      }
    }
  }

}
</script>